<template>
  <div class="W1">
    <div id="w1">
      <h1>疫情物资拨放系统</h1>
    </div>
    <div class="W2">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="70%"
        class="demo-ruleForm"
      >
        <el-form-item
          label="物资拨放城市"
          :label-width="formLabelWidth_hos"
          prop="pca"
        >
          <el-cascader
            v-model="ruleForm.pca"
            :options="pca"
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'name',
            }"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item
          label="拨放医院"
          prop="name"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="医院地址"
          prop="adress"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model="ruleForm.adress"></el-input>
        </el-form-item>
        <el-form-item
          label="疫情物资接收人"
          prop="inputperson"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model="ruleForm.inputperson"></el-input>
        </el-form-item>
        <el-form-item
          label="疫情物资接收人号码"
          prop="inputIphone"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model="ruleForm.inputIphone"></el-input>
        </el-form-item>
        <el-form-item
          label="疫情物资拨放点"
          prop="ouputadress"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model="ruleForm.ouputadress"></el-input>
        </el-form-item>
        <el-form-item
          label="拨放口罩数量"
          prop="mask"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model.number="ruleForm.mask"></el-input>
        </el-form-item>
        <el-form-item
          label="拨放防护服数量"
          prop="cloth"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model.number="ruleForm.cloth"></el-input>
        </el-form-item>
        <el-form-item
          label="拨放呼吸机数量"
          prop="breath"
          :label-width="formLabelWidth_hos"
        >
          <el-input v-model.number="ruleForm.breath"></el-input>
        </el-form-item>

        <el-form-item
          label="拨放地点疫情现况"
          :label-width="formLabelWidth_hos"
          prop="position"
        >
          <el-select
            v-model="ruleForm.position"
            clearable
            placeholder="请选择"
            prop="position"
          >
            <el-option
              v-for="item in options_adress"
              :key="item.value"
              :value="item.position"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div class="circle"></div>
      <div class="circle equator"></div>
      <div class="circle equator2"></div>
      <div class="circle equator3"></div>
      <div class="circle weft1"></div>
      <div class="circle weft2"></div>
      <div class="circle weft3"></div>
      <div class="circle weft3"></div>
      <div class="where_in">
        <p>急 速 支 援</p>
      </div>
      <div class="circle weft4"></div>
      <div class="circle weft5"></div>
      <div class="circle weft6"></div>
      <div class="circle weft7"></div>
      <div class="circle weft8"></div>
      <div class="circle weft9"></div>
      <div class="circle weft10"></div>
    </div>
  </div>
</template>
<script>
import pca from "../../assets/pca.json";
export default {
  inject:['reload'],
  data() {
    // var checkNum = (rule, value, callback) => {
    //   if (!value || value == "" || value == null) {
    //     return callback(new Error("输入数据不能为空！"));
    //   }
    //   setTimeout(() => {
    //     if (!Number.isInteger(Number(value))) {
    //       callback(new Error("请输入数字！"));
    //     } else if (Number(value) < 0) {
    //       callback(new Error("输入数据不能为负数！"));
    //     }
    //   }, 10);
    // };
    return {
      options_adress: [
        {
          value: "选项1",
          position: "重度疫情地区",
        },
        {
          value: "选项2",
          position: "中度疫情地区",
        },
        {
          value: "选项3",
          position: "轻度疫情地区",
        },
        {
          value: "选项4",
          position: "疑似病例地区",
        },
      ],
      pca,
      formLabelWidth_hos: "160px",
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
        adress: [
          { required: true, message: "请输入医院具体名称", trigger: "blur" },
        ],
        inputperson: [
          { required: true, message: "请输入物资接收人姓名", trigger: "blur" },
        ],
        inputIphone: [
          {
            required: true,
            message: "请输入物资接收人手机号码",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        ouputadress: [
          { required: true, message: "请输入物资拨放地", trigger: "blur" },
        ],
        mask: [
          { required: true, message: "请输入数量", trigger: "blur" },
          {
            required: true,
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        cloth: [
          { required: true, message: "请输入数量", trigger: "blur" },
          {
            required: true,
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],

        breath: [
          { required: true, message: "请输入数量", trigger: "blur" },
          {
            required: true,
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],

        // mask: [{ validator: checkNum, trigger: "blur" }],
        // cloth: [{ validator: checkNum, trigger: "blur" }],
        // breath: [{ validator: checkNum, trigger: "blur" }],
        pca: [
          {
            type: "array",
            required: true,
            message: "请选择城市",
            trigger: "blur",
          },
        ],
        position: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleChange() {},
    submitForm(formName) {
      console.log(this.ruleForm, formName,"111");
      this.$refs[formName].validate((valid) => {
        console.log(valid,"]]]]]")
        if (valid) {
          alert("拨放成功!");
          this.$router.push({
            path: "/wuzi/index2",
            query: {
              ALL: this.ruleForm,
            },
          });
        } else {
          alert("拨放失败，请再检查一次数据!");
          // this.$router.go({
          //   path:"/wuzi/index"
          // });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.reload();
      // this.$router.go(0);
    },
  },
};
</script>


<style>
#w1 {
  display: block;
  position: relative;
  text-align: center;
}
#w1 h1 {
  padding: 20px;
}

.W1 {
  border-radius: 5px;
  margin-top: -20px;
  height: 820px;
  background-image: url("./1.jpg");
  background-size: 100% 100%;
  /* background-image: linear-gradient(#e66465, #9198e5); */
}
.W2 {
  color: black;
  width: 800px;
  float: left;
  position: relative;
}
.where_in {
  color: red;
  font-weight: bolder;
  position: absolute;
  font-size: 30px;
  left: 1000px;
  top: 330px;
}
.W2 .el-form-item__label{
  color:#fff;
  font-family:"华文行楷";
  font-weight: bluder;
}
.circle {
  border-radius: 100%;
  height: 350px;
  width: 350px;
  left: 900px;
  top: 200px;
  position: absolute;
  border: 2px solid rgb(226, 72, 72);
  transform-style: preserve-3d;
}

.equator2 {
  width: 280px;
  left: 935px;
  border: 4px solid rgb(226, 72, 72);
  top: 170px;
  transform: rotateX(80deg) translateZ(70px);
}
.equator {
  border: 4px solid rgb(226, 72, 72);
  top: 260px;
  transform: rotateX(74deg) translateZ(70px);
}
.equator3 {
  width: 300px;
  left: 925px;
  border: 4px solid rgb(226, 72, 72);
  top: 355px;
  transform: rotateX(77deg) translateZ(70px);
}

.weft1 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft1;
}

.weft2 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft2;
}

.weft3 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft3;
}

.weft4 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft4;
}

.weft5 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft5;
}

.weft6 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft6;
}

.weft7 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft7;
}

.weft8 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft8;
}

.weft9 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft9;
}

.weft10 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft10;
}

@-webkit-keyframes weft1 {
  from {
    -webkit-transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-webkit-keyframes weft2 {
  from {
    -webkit-transform: rotateY(20deg);
  }

  to {
    -webkit-transform: rotateY(380deg);
  }
}

@-webkit-keyframes weft3 {
  from {
    -webkit-transform: rotateY(40deg);
  }

  to {
    -webkit-transform: rotateY(400deg);
  }
}

@-webkit-keyframes weft4 {
  from {
    -webkit-transform: rotateY(60deg);
  }

  to {
    -webkit-transform: rotateY(420deg);
  }
}

@-webkit-keyframes weft5 {
  from {
    -webkit-transform: rotateY(80deg);
  }

  to {
    -webkit-transform: rotateY(440deg);
  }
}

@-webkit-keyframes weft6 {
  from {
    -webkit-transform: rotateY(100deg);
  }

  to {
    -webkit-transform: rotateY(460deg);
  }
}

@-webkit-keyframes weft7 {
  from {
    -webkit-transform: rotateY(120deg);
  }

  to {
    -webkit-transform: rotateY(480deg);
  }
}

@-webkit-keyframes weft8 {
  from {
    -webkit-transform: rotateY(140deg);
  }

  to {
    -webkit-transform: rotateY(500deg);
  }
}

@-webkit-keyframes weft9 {
  from {
    -webkit-transform: rotateY(160deg);
  }

  to {
    -webkit-transform: rotateY(520deg);
  }
}

@-webkit-keyframes weft10 {
  from {
    -webkit-transform: rotateY(180deg);
  }

  to {
    -webkit-transform: rotateY(540deg);
  }
}
</style>
